<template>
  <el-card>
    <!--  -->
    <div class="header-header">
      <div class="content_left">
        <span>说明：目前支持学科和关键字条件筛选</span>
      </div>
      <div class="content_right">
        <el-button type="success"
                   icon="el-icon-edit"
                   size="small"
                   style="background: #67c23a; color: #fff"
                   @click="$router.push('/questions/new')">新增试题</el-button>
      </div>
    </div>
    <!-- 顶部表单区域 -->
    <el-form label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="学科：">
            <el-select v-model="formData.subjectID"
                       placeholder="请选择"
                       size="small"
                       style="width: 100%">
              <el-option v-for="item in subject"
                         :key="item.id"
                         :label="item.subjectName"
                         :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="目录：">
            <el-select v-model="formData.catalogID"
                       placeholder="请选择"
                       size="small"
                       style="width: 100%">
              <el-option v-for="item in catalogList"
                         :key="item.id"
                         :label="item.directoryName"
                         :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签">
            <el-select v-model="headerData.subject"
                       style="width: 100%"
                       placeholder="请选择"
                       size="small">
              <el-option label="区域一"
                         value="shanghai" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input v-model="formData.question"
                      placeholder="根据题干搜索"
                      size="small" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="试题类型">
            <el-select v-model="headerData.subject"
                       style="width: 100%"
                       placeholder="请选择"
                       size="small">
              <el-option label="区域一"
                         value="shanghai" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度">
            <el-select v-model="headerData.subject"
                       style="width: 100%"
                       placeholder="请选择"
                       size="small">
              <el-option label="区域一"
                         value="shanghai" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向">
            <el-select v-model="headerData.subject"
                       style="width: 100%"
                       placeholder="请选择"
                       size="small">
              <el-option label="区域一"
                         value="shanghai" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人">
            <el-select v-model="headerData.subject"
                       style="width: 100%"
                       placeholder="请选择"
                       size="small">
              <el-option label="区域一"
                         value="shanghai" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="题目备注">
            <el-select v-model="headerData.subject"
                       style="width: 100%"
                       placeholder="请选择"
                       size="small">
              <el-option label="区域一"
                         value="shanghai" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-select v-model="headerData.subject"
                       style="width: 100%"
                       placeholder="请选择"
                       size="small">
              <el-option label="区域一"
                         value="shanghai" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <city-view wid />
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <div class="button">
              <el-button type="primary"
                         size="small">搜索</el-button>
              <el-button type=""
                         size="small">清空</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-tabs v-model="activeName"
             type="card"
             @tab-click="handleClick">
      <el-tab-pane label="全部"
                   name="all">
        <!-- 表格内容 -->
        <choices-view :choice-list="choiceList"
                      :total="total"
                      :query="query"
                      @handleSize="query.pagesize= $event"
                      @handlePage="query.page = $event"
                      @handleUpdate="getChoicesList" />
      </el-tab-pane>
      <el-tab-pane label="已审核"
                   name="0">
        <choices-view :choice-list="choiceList"
                      :total="total"
                      :query="query"
                      @handleSize="query.pagesize= $event"
                      @handlePage="query.page = $event"
                      @handleUpdate="getChoicesList" />
      </el-tab-pane>
      <el-tab-pane label="待审核"
                   name="1">
        <choices-view :choice-list="choiceList"
                      :total="total"
                      :query="query"
                      @handleSize="query.pagesize= $event"
                      @handlePage="query.page = $event"
                      @handleUpdate="getChoicesList" />
      </el-tab-pane>
      <el-tab-pane label="已拒绝"
                   name="2">
        <choices-view :choice-list="choiceList"
                      :total="total"
                      :query="query"
                      @handleSize="query.pagesize= $event"
                      @handlePage="query.page = $event"
                      @handleUpdate="getChoicesList" />
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import { getSubjectListAPI, getDirectoryListAPI } from '@/api/subject'
import ChoicesView from './components/choicesView.vue'
import { getAllChoiceAPI } from '@/api/choice'
import dayjs from 'dayjs'

export default {
  name: 'ChoiceView',
  components: {
    ChoicesView
  },
  data () {
    return {
      // 搜索表单
      formData: {
        subjectID: '',
        catalogID: '',
        question: ''
      },
      // 搜索学科列表
      subject: [],
      // 二级目录列表
      catalogList: [],
      headerData: {},
      // tab栏切换
      activeName: 'all',
      // 请求参数
      query: {
        page: 1,
        pagesize: 10
      },
      // 切换表单列表
      choiceList: [],
      total: 0

    }
  },
  watch: {
    formData: {
      async handler (val) {
        if (val.subjectID) {
          const res = await getDirectoryListAPI(val.subjectID)
          // console.log(res)
          this.catalogList = res.items
        }
      },
      deep: true
    }
  },
  created () {
    this.getSubjectList()
    this.getChoicesList()
  },
  methods: {
    // 获取学科列表
    async getSubjectList () {
      const res = await getSubjectListAPI()
      // console.log(res)
      this.subject = res.items
    },
    // 获取试题列表
    async getChoicesList () {
      let res = null
      if (this.activeName === 'all') {
        res = await getAllChoiceAPI(this.query)
        console.log(res)
      } else {
        res = await getAllChoiceAPI({
          ...this.query,
          chkState: this.activeName
        })
      }
      this.choiceList = res.items
      this.choiceList.forEach(item => {
        item.addDate = dayjs(item.addDate).format('YYYY-MM-DD')
      })
      this.total = res.counts
    },

    // 切换tab时触发
    handleClick () {
      this.getChoicesList()
    }
  }
}
</script>

<style scoped lang="scss">
/* .el-card {
  margin: 20px;
} */
.el-alert {
  margin-top: 20px;
}
.header-header {
  display: flex;
  justify-content: space-between;
  .content_left {
    font-size: 12px;
    color: pink;
  }
}
.button {
  display: flex;
  justify-content: right;
}
</style>
